<div class="content guide with-sidebar filters-guide">
<h1>过滤器</h1>
<p>Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：<strong>双花括号插值和 <code>v-bind</code> 表达式</strong> (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：</p>
<pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 在双花括号中 --&gt;</span>
{{ message | capitalize }}

<span class="hljs-comment">&lt;!-- 在 `v-bind` 中 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-bind:id</span>=<span class="hljs-string">"rawId | formatId"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<p>你可以在一个组件的选项中定义本地的过滤器：</p>
<pre><code class="hljs js">filters: {
  <span class="hljs-attr">capitalize</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value</span>) </span>{
    <span class="hljs-keyword">if</span> (!value) <span class="hljs-keyword">return</span> <span class="hljs-string">''</span>
    value = value.toString()
    <span class="hljs-keyword">return</span> value.charAt(<span class="hljs-number">0</span>).toUpperCase() + value.slice(<span class="hljs-number">1</span>)
  }
}</code></pre>
<p>或者在创建 Vue 实例之前全局定义过滤器：</p>
<pre><code class="hljs js">Vue.filter(<span class="hljs-string">'capitalize'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value</span>) </span>{
  <span class="hljs-keyword">if</span> (!value) <span class="hljs-keyword">return</span> <span class="hljs-string">''</span>
  value = value.toString()
  <span class="hljs-keyword">return</span> value.charAt(<span class="hljs-number">0</span>).toUpperCase() + value.slice(<span class="hljs-number">1</span>)
})

<span class="hljs-keyword">new</span> Vue({
  <span class="hljs-comment">// ...</span>
})</code></pre>
<p>下面这个例子用到了 <code>capitalize</code> 过滤器：</p>
<div class="demo" id="example-1">
<input type="text" v-model="message"/>
<p>{{ message | capitalize }}</p>
</div>
<script>
  new Vue({
    el: '#example-1',
    data: function () {
      return {
        message: 'john'
      }
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  })
</script>
<p>过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，<code>capitalize</code> 过滤器函数将会收到 <code>message</code> 的值作为第一个参数。</p>
<p>过滤器可以串联：</p>
<pre><code class="hljs html">{{ message | filterA | filterB }}</code></pre>
<p>在这个例子中，<code>filterA</code> 被定义为接收单个参数的过滤器函数，表达式 <code>message</code> 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 <code>filterB</code>，将 <code>filterA</code> 的结果传递到 <code>filterB</code> 中。</p>
<p>过滤器是 JavaScript 函数，因此可以接收参数：</p>
<pre><code class="hljs html">{{ message | filterA('arg1', arg2) }}</code></pre>
<p>这里，<code>filterA</code> 被定义为接收三个参数的过滤器函数。其中 <code>message</code> 的值作为第一个参数，普通字符串 <code>'arg1'</code> 作为第二个参数，表达式 <code>arg2</code> 的值作为第三个参数。</p>
<div class="guide-links">
<span>← <a href="plugins.html">插件</a></span>
<span style="float: right;"><a href="single-file-components.html">单文件组件</a> →</span>
</div>
<div class="footer">
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div class="bsa-cpc"></div>
<script>
  (function(){
    if(typeof _bsa !== 'undefined' && _bsa) {
    _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
      target: '.bsa-cpc',
      align: 'horizontal',
      disable_css: 'true'
    });
      }
  })();
</script>

    发现错误？想参与编辑？
    <a href="https://github.com/vuejs/cn.vuejs.org/blob/master/srcfilters.md" target="_blank">
      在 GitHub 上编辑此页！
    </a>
</div>
</div>